<template>
  <div>外卖123132</div>
  <ul>
    <li v-for="(item, index) in list" :key="item.id">{{ item.name }} <el-button text @click="remove(item.id)">删除</el-button></li>
  </ul>
  <el-pagination layout="prev, pager, next" :total="total" @current-change="fn" />
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import axios from 'axios'
import '@/mock/Index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { indexApi } from '@/api/api.js'

const list = ref([])
const total = ref(0)

// 设置当前页数为1
const currentPage = ref(1)

//获取数据
const getData = async () => {
  // axios.post('/api/list', { currentPage: currentPage.value, pageSize: 10 }).then((res) => {
  //   console.log(res.data)
  //   list.value = res.data.result
  //   total.value = res.data.total
  // })
  const res = await indexApi({ currentPage: currentPage.value, pageSize: 10 })
  list.value = res.data.result
  // list数组值
  // total总页数值
  total.value = res.data.total
}

//页码切换的数据
const fn = (num) => {
  currentPage.value = num
}
//监听页码的改变直接做请求
watch(currentPage, () => {
  getData()
})

//删除数据
const remove = (id) => {
  ElMessageBox.confirm('确认删除吗', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios.post('/api/remove', { id: id }).then((res) => {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        })
        getData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

onMounted(() => {
  getData()
})
</script>

<style lang="less" scoped></style>
